---
title: "Accessibility Checker Rule Help: Rpt_Aria_ValidRole"
---
import "../../../styles/ToolHelp.scss"
import { CodeSnippet, Tag } from "carbon-components-react";

<div className="toolHelp">
<Row>
<Column colLg={16} colMd={8} colSm={4} className="toolHead">

### The `role` defined on the element is not valid per WAI-ARIA specification

<div id="locLevel"></div>

Elements must have a valid `role` per WAI-ARIA specification

</Column>
</Row>
<Row>
<Column colLg={11} colMd={5} colSm={4} className="toolMain">

### Why is this important?

The WAI-ARIA specification provides a collection of accessibility roles as the main indicator of the type of control. This is used to support platform accessibility APIs. Using a valid WAI-ARIA `role` on an element as defined in the WAI-ARIA specification allows assistive technologies to use the role semantics to present and support consistent object interaction.

<div id="locSnippet"></div>

### What to do

* Update the element with a valid `role` that fits the type of control as intended, using the WAI-ARIA 1.2 specification as a guide.
The following example shows an element with a valid `role="scrollbar"` intended to provide scrollbar functionality:

<CodeSnippet type="multi" light={true}> &lt;div id="content1"&gt;&lt;/div&gt;
   &lt;div
      role="scrollbar"
      aria-controls="content1"
      aria-orientation="vertical"
      aria-valuemax="100"
      aria-valuemin="0"
      aria-valuenow="25"&gt;
       &lt;div class="scrollhandle"&gt;&lt;/div&gt;
   &lt;/div&gt;</CodeSnippet>

</Column>
<Column colLg={5} colMd={3} colSm={4} className="toolLeft">

### About this requirement

[IBM 4.1.2 Name, Role, Value](https://www.ibm.com/able/requirements/requirements/#4_1_2)
[W3C WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/)

### Who does this affect?

* Blind people using screen readers
* People with dexterity impairment using voice control

</Column>
</Row>
</div>

export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)
